<script setup lang="ts" name="Swiper">
	import { carouselsListApi, delCarouselsApi } from '@/api/modules/config'
	import ProTable from '@/components/ProTable/index.vue'
	import { ColumnProps } from '@/components/ProTable/interface'
	import { ElMessage } from 'element-plus'
	import { ref } from 'vue'

	// ProTable实例
	const tableRef = ref()

	// 表格项配置
	const columns: Partial<ColumnProps>[] = [
		{ type: 'selection' },
		{ label: '轮播图', prop: 'carouselUrl', image: true },
		{ label: '跳转链接', prop: 'redirectUrl', link: true },
		{ label: '排序值', prop: 'carouselRank', tag: true },
		{ label: '添加时间', prop: 'createTime' },
		{ label: '操作', prop: 'operation' }
	]

	// 删除轮播图
	const handleRemove = async (ids: any[]) => {
		await delCarouselsApi({ ids })
		ElMessage.success('删除成功')
		tableRef.value?.refresh()
	}
</script>

<template>
	<div class="content-box">
		<ProTable ref="tableRef" :columns="columns" :requestApi="carouselsListApi">
			<!-- 表格头部 -->
			<template #tableHeader="{ list }">
				<el-button icon="plus" type="primary" plain round>增加</el-button>
				<el-popconfirm title="你确定要删除吗?">
					<template #reference>
						<el-button icon="delete" type="danger" plain round :disabled="!list.length">批量删除</el-button>
					</template>
				</el-popconfirm>
			</template>
			<!-- 自定义表格项 -->
			<template #operation="{ row }">
				<el-button type="primary" link>修改</el-button>
				<el-popconfirm title="确定删除吗?" @confirm="handleRemove([row.carouselId])">
					<template #reference>
						<el-button type="danger" link>删除</el-button>
					</template>
				</el-popconfirm>
			</template>
		</ProTable>
	</div>
</template>

<style scoped lang="scss">
	@import './index.scss';
</style>
